<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>登录--后台管理</title>
    <link rel="stylesheet" href="/lib/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/css/login.css" media="all" />

    <style type="text/css">
        body {
            /*在页面顶部加载背景最佳，如有必要这块可以从数据库读取*/
            background-image: url(/images/bg_01.jpg);
        }
    </style>

</head>
<body>

<div class="login">
    <h1>登录</h1>
    <form class="layui-form"   >
        <div class="layui-form-item">
            <input class="layui-input" name="username" placeholder="用户名"   lay-verify="username" type="text" autocomplete="off">
        </div>
        <div class="layui-form-item">
            <input class="layui-input" name="password" placeholder="密码"    lay-verify="password" type="password" autocomplete="off">
        </div>

        <button class="layui-btn login_btn" lay-submit="" lay-filter="loginBtn">登录</button>
    </form>
</div>

<script src="/lib/layui/layui.js"></script>

<script>
    layui.use(['form', 'layedit', 'laydate'], function () {
        var form = layui.form;
        $ = layui.jquery;
        layer = layui.layer;


        //自定义验证规则
        form.verify({
            username: function (value) {
                if (value == "") {
                    return '请输入用户名';
                }
            },
            password:function(value){
                if (value == "") {

                    return '请输入用户密码';
                }
            }
        });
        //监听提交 圈存转账（充值）
        form.on('submit(loginBtn)', function (data) {
            layer = layui.layer;
            var waitIndex = '';
            $.ajax({
                url: "/login",
                type: "post",
                data: data.field,
                beforeSend: function () {
                    waitIndex = layer.load();//删除前打开遮挡层
                },
                success: function (returnData) {
                    if (returnData.status == 200) {
                        location.href="/toIndex";
                    } else {
                        layer.msg("用户名或密码错误", {icon: 2, time: 2000, shade: 0.1}, function () {
                        });
                    }
                }, complete: function () {
                    layer.close(waitIndex);
                }, error: function (XMLHttpRequest, txtStatus, errorThrown) {
                    layer.close(waitIndex);
                }
            });
            return false;
        });
    });
</script>
</body>
</html>